<!DOCTYPE html >
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
	<meta name="theme-color" content="#000000">
	<meta name="renderer" content="webkit">
	<meta name="google" content="notranslate">
	<meta name="format-detection" content="telephone=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>文件管理</title>
</head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/default.css"/>
<link rel="stylesheet" type="text/css" href="css/scrollbar.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type = "text/javascript" >
	function fileSelected() {
		var file = document.getElementById('fileToUpload').files[0];
		if (file) {
			var fileSize = 0;
			if (file.size > 1024 * 1024)
				fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
			else
				fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

			document.getElementById('fileName').innerHTML = '文件名: ' + file.name;
			document.getElementById('fileSize').innerHTML = '文件大小: ' + fileSize;
			document.getElementById('fileType').innerHTML = '文件类型: ' + file.type;
		}
	}

	function uploadFile() {
		var fd = new FormData();
		//把上传的文件绑定到FormData
		//var file = document.getElementById('fileToUpload').files[0];
		var files = $("#fileToUpload");
		var fileFlag = false;
		files.each(function(){
			if($(this).val()!=""){
				fileFlag = true;
			}
		})
		if(!fileFlag) {
			alert("请先选择好文件!");
			return;
		}

		fd.append("file", files[0]);
		var xhr = new XMLHttpRequest();
		//请求中的方法。
		xhr.upload.addEventListener("progress", uploadProgress, false);
		//请求成功调用的方法
		xhr.addEventListener("load", uploadComplete, false);
		//请求错误调用方法
		xhr.addEventListener("error", uploadFailed, false);
		//取消请求调用方法
		xhr.addEventListener("abort", uploadCanceled, false);
		//请求方式与请求url
		xhr.open("POST", "http://www.emmmya.com:8234/assets/fileUpload");
		//将请求绑定FormData
		xhr.send(fd);
	}

	function uploadProgress(evt) {
		if (evt.lengthComputable) {
			var percentComplete = Math.round(evt.loaded * 100 / evt.total);
			document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
		} else {
			document.getElementById('progressNumber').innerHTML = '无法计算';
		}
	}

	function uploadComplete(evt) {
		/* 当服务器响应后，这个事件就会被触发 */
		alert(evt.target.responseText);
		$("#fileToUpload").val("");
		$("#progressNumber").html("");
	}

	function uploadFailed(evt) {
		alert("上传文件发生了错误尝试");
	}

	function uploadCanceled(evt) {
		alert("上传被用户取消或者浏览器断开连接");
	}
</script>
<style type="text/css">
	html,body{
		cursor: url("http://127.0.0.1:8848/DirFileManagement/img/mouse.ico"),auto;
		min-width: 340px;
		min-height: 800px;
	}
	/* 超小屏幕（手机，小于 768px） */
	/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
	@media (max-width : 768px) {
		.head{
			height: 80px;
		}
		.head_l{
			height: 40px;
			float: none;
		}
		.head_r{
			position: relative;
			border: 1px solid #000000;
			top: 1px;
			float: none;
		}
		.upload_div {
			width:300px;
			height: 100px;
			margin-left: -50px;    /* 宽度的一半 */
		}

	}
	/* 小屏幕（平板，大于等于 768px） */
	@media (min-width: 768px) {
		.head{
			height: 40px;
		}
		.head_l{
			height: 40px;
			float: left;
		}
		.head_r{

			float: left;
		}
		.upload_div {
			width:400px;
			height: 150px;
			margin-left: -75px;    /* 宽度的一半 */
		}

	}

	/* 中等屏幕（桌面显示器，大于等于 992px） */
	@media (min-width: 992px) {
		.head{
			height: 40px;
		}
		.head_l{
			height: 40px;
			float: left;
		}
		.head_r{

			float: left;
		}
		.upload_div {
			width:400px;
			height: 150px;
			margin-left: -75px;    /* 宽度的一半 */
		}

	}

	/* 大屏幕（大桌面显示器，大于等于 1200px） */
	@media (min-width: 1200px) {
		.head{
			height: 40px;
		}
		.head_l{
			height: 40px;
			float: left;
		}
		.head_r{

			float: left;
		}
		.upload_div {
			width:500px;
			height: 300px;
			margin-left: -150px;    /* 宽度的一半 */
		}

	}
	.btnGroup{
		height: 100%;
	}
	.btnOne{
		width: 40px;
		height: 40px;
		line-height: 100%;
		float: left;
		margin-right: 10px;
	}
	.head_r{
		margin: 0 auto;
		height: 40px;
		line-height: 40px;
	}
	.path_ul{
		width: auto;
	}
	.path_one{
		float: left;

	}
	.path_one a{
		font-size: 16px ;
	}
	.path_one:after{
		position: relative;
		display: inline-block;
		top: 3px;
		width: 20px;
		height: 20px;
		content:'';
		background-repeat:no-repeat;
		background-image: url(img/point_right.png);
		background-size: 20px;
		background-position: center 2px;

	}
	.back{
		border-radius: 8px;
		background-color: #203E60;
		background-repeat:no-repeat;
		background-image: url(img/back.png);
		background-size: 30px;
		background-position:center 8px;
	}
	.go{
		border-radius: 8px;
		background-color: #203E60;
		background-repeat:no-repeat;
		background-image: url(img/前进.png);
		background-size: 30px;
		background-position:center 8px;
	}
	.home{
		border-radius: 8px;
		background-color: #203E60;
		background-repeat:no-repeat;
		background-image: url(img/home.png);
		background-size: 25px;
		background-position:center;
	}
	.btnOne:hover{
		background-color: #2F3C4F;
		-moz-box-shadow: 5px 5px 5px #888888; /* 老的 Firefox */
		box-shadow: 5px 5px 5px #888888;
	}
	.btnOne:active{
		position: relative;
		/* margin-top: 1px; */
		left: 1px;
		top:1px;
	}

	.path_logo{
		float: left;
		width: 30px;
		height: 30px;
		border-radius: 8px;
		background-repeat:no-repeat;
		background-image: url(img/路径导航.png);
		background-size: 20px;
		background-position: center 10px;
		margin:0;
	}

	.content{
		position: relative;
		margin:0 auto;
		border-radius: 10px;
		-moz-box-shadow: 0 0 7px 5px  #A8E4B1; /* 老的 Firefox */
		box-shadow: 0 0 7px 5px  #A8E4B1;
		width: 100%;
		height: 520px;
	}
	.c_body{

		margin: 0px 5px 10px 5px;
		padding-top: 0.625rem;
		height: 500px;
		overflow: auto;
	}
	.dir,.file,.details{
		position: relative;
		float:left;
		margin: 10px 10px 10px 10px;
		width:120px;
		height: 160px;
	}
	.dir:hover,.file:hover{
		background-color: #118DEF;
		border-radius: 8px;
		color: #FFFFFF;
	}
	.dir_file_active{
		background-color: #118DEF;
		border-radius: 8px;
		color: #FFFFFF;
	}
	.name{
		position: absolute;
		bottom: 0px;
		margin:0px auto;
		width: 100%;
		height: 50px;
		/*自适应父标签的垂直居中*/
		display: -webkit-box;
		-webkit-box-orient: horizontal;
		-webkit-box-pack: center;
		-webkit-box-align: center;

		display: -moz-box;
		-moz-box-orient: horizontal;
		-moz-box-pack: center;
		-moz-box-align: center;

		display: -o-box;
		-o-box-orient: horizontal;
		-o-box-pack: center;
		-o-box-align: center;

		display: -ms-box;
		-ms-box-orient: horizontal;
		-ms-box-pack: center;
		-ms-box-align: center;

		display: box;
		box-orient: horizontal;
		box-pack: center;
		box-align: center;

	}
	.name:hover{
		cursor: default;
	}
	.dir_img{
		margin-top: 5px;
		height: 90px;
		width: 100%;
		background-image:url(img/dir.png) ;
		border-radius: 8px;
		background-repeat:no-repeat;
		background-size: 90px;
		background-position:center;
	}
	.other_file{
		margin-top: 5px;
		height: 90px;
		width: 100%;
		background-image:url(img/file.png) ;
		border-radius: 8px;
		background-repeat:no-repeat;
		background-size: 90px;
		background-position:center;
	}
	.xlsx{
		margin-top: 5px;
		height: 90px;
		width: 100%;
		background-image:url(img/xls.png) ;
		border-radius: 8px;
		background-repeat:no-repeat;
		background-size: 90px;
		background-position:center;
	}
	.png{
		margin-top: 5px;
		height: 90px;
		width: 100%;
		background-image:url(img/png.png) ;
		border-radius: 8px;
		background-repeat:no-repeat;
		background-size: 90px;
		background-position:center;
	}
	.pdf{
		margin-top: 5px;
		height: 90px;
		width: 100%;
		background-image:url(img/pdf.png) ;
		border-radius: 8px;
		background-repeat:no-repeat;
		background-size: 90px;
		background-position:center;
	}
	.apk{
		margin-top: 5px;
		height: 90px;
		width: 100%;
		background-image:url(img/apk.png) ;
		border-radius: 8px;
		background-repeat:no-repeat;
		background-size: 90px;
		background-position:center;
	}
	.zip{
		margin-top: 5px;
		height: 90px;
		width: 100%;
		background-image:url(img/zip.png) ;
		border-radius: 8px;
		background-repeat:no-repeat;
		background-size: 90px;
		background-position:center;
	}
	.mp4{
		margin-top: 5px;
		height: 90px;
		width: 100%;
		background-image:url(img/视频.png) ;
		border-radius: 8px;
		background-repeat:no-repeat;
		background-size: 90px;
		background-position:center;
	}
	.foot{
		margin-top: 10px;
		width: 100%;
		height: 200px;
		border: 1px solid red;
	}
	.info_details{

		height: 45px;
		margin-right: 5px;
		margin-left: 5px;
		/*自适应父标签的垂直居中*/
		display: -webkit-box;
		-webkit-box-orient: horizontal;
		-webkit-box-pack: center;
		-webkit-box-align: center;

		display: -moz-box;
		-moz-box-orient: horizontal;
		-moz-box-pack: center;
		-moz-box-align: center;

		display: -o-box;
		-o-box-orient: horizontal;
		-o-box-pack: center;
		-o-box-align: center;

		display: -ms-box;
		-ms-box-orient: horizontal;
		-ms-box-pack: center;
		-ms-box-align: center;

		display: box;
		box-orient: horizontal;
		box-pack: center;
		box-align: center;
	}
	.upload_div {
		position: fixed;
		background-color: #118DEF;
		border-radius: 5px;
		left: 50%;
		top: 18.75rem;
		/*自适应父标签的垂直居中*/
		display: -webkit-box;
		-webkit-box-orient: horizontal;
		-webkit-box-pack: center;
		-webkit-box-align: center;

		display: -moz-box;
		-moz-box-orient: horizontal;
		-moz-box-pack: center;
		-moz-box-align: center;

		display: -o-box;
		-o-box-orient: horizontal;
		-o-box-pack: center;
		-o-box-align: center;

		display: -ms-box;
		-ms-box-orient: horizontal;
		-ms-box-pack: center;
		-ms-box-align: center;

		display: box;
		box-orient: horizontal;
		box-pack: center;
		box-align: center;
	}
	.close_icon{
		width:20px;
		height: 20px;
		position:absolute;
		right: 0px;
		top:0px;
		background-image: url(img/close.png);
		background-size: 20px;
		background-repeat: no-repeat;
	}
	.close_icon:hover{
		animation:turn 1s linear infinite;
	}
	@keyframes turn{
		0%{-webkit-transform:rotate(0deg);}
		25%{-webkit-transform:rotate(90deg);}
		50%{-webkit-transform:rotate(180deg);}
		75%{-webkit-transform:rotate(270deg);}
		100%{-webkit-transform:rotate(360deg);}
	}
</style>
<style type="text/css">


	.contextmenu ,.file_menu,.dir_menu{
		display: none;
		position: absolute;
		width: 150px;
		margin: 0;
		padding: 0;
		background: #FFFFFF;
		border-radius: 5px;
		list-style: none;
		box-shadow: 0 15px 35px rgba(50,50,90,0.1),  0 5px 15px rgba(0,0,0,0.07);
		overflow: hidden; z-index: 999999; }

	.contextmenu li ,.file_menu li,.dir_menu li{
		border-left: 3px solid transparent;
		transition: ease .2s; }

	.contextmenu li a ,.file_menu li a,.dir_menu li a{
		display: block;
		padding: 10px;
		color: #506E86;
		text-decoration: none;
		transition: ease .2s; }

	.contextmenu li:hover ,.file_menu li:hover,.dir_menu li:hover{
		background: #A0DFFE;
		border-left: 3px solid #4CA2BB;
		border-right: 3px solid #4CA2BB;
	}

	.contextmenu li:hover a ,.file_menu li:hover a,.dir_menu li:hover a{
		font-weight: bold;
		color: #1A2634; }

</style>
<body class="scro2">
<div class="container-fluid card" style="border:1px solid #000000">
	<div id="head" class="head">
		<div id="head_l" class="head_l">
			<ul class="btnGroup">
				<li class="btnOne back"  style="font-size: 13px;"></li>
				<li class="btnOne go" style="font-size: 13px;"></li>
				<li class="btnOne home" style="font-size: 13px;"></li>
			</ul>
		</div>
		<div id="head_r" class="head_r">
			<ul class="path_ul">
				<li class="path_logo" ></li>
				<li class="path_one" style="width: auto;"><a href="#">根目录</a></li>
				<li class="path_one" style="width: auto;"><a href="#">文件夹一</a></li>
				<li class="path_one" style="width: auto;"><a href="#">文件夹二</a>	</li>
			</ul>
		</div>
	</div>
	<hr style="height: 1px; background-color: #F8E8B4;">
	<div id="content" class="content">
		<input type="hidden" value="" name="currentPath" id="currentPath"/>
		<div id="c_body" class="c_body scro2">
			<div class="dir" >
				<div class="dir_img">
				</div>
				<div class="name">
					<span style="display:block;text-align: center;">文件夹231</span>
				</div>
			</div>

			<div class="file" >
				<div class="xlsx">
				</div>
				<div id="name" class="name">
					<span style="display:block;text-align: center;">2020-06月物流报表.xlsx</span>
				</div>
			</div>

			<div class="file" >
				<div class="png">
				</div>
				<div id="name" class="name">
					<span style="display:block;text-align: center;">2020-06月物流报表.png</span>
				</div>
			</div>

			<div class="file" >
				<div class="pdf">
				</div>
				<div id="name" class="name">
					<span style="display:block;text-align: center;">2020-06月物流报表.pdf</span>
				</div>
			</div>
			<div class="file" >
				<div class="apk">
				</div>
				<div id="name" class="name">
					<span style="display:block;text-align: center;">2020-06月物流报表.apk</span>
				</div>
			</div>

			<div class="file" >
				<div class="png">
				</div>
				<div id="name" class="name">
					<span style="display:block;text-align: center;">2020-06月物流报表.pdf</span>
				</div>
			</div>
			<div class="file" >
				<div class="zip">
				</div>
				<div id="name" class="name">
					<span style="display:block;text-align: center;">2020-06月物流报表.zip</span>
				</div>
			</div>
			<div class="file" >
				<div class="mp4">
				</div>
				<div id="name" class="name">
					<span style="display:block;text-align: center;">2020-06月物流报表.mp4</span>
				</div>
			</div>
		</div>
	</div>
	<div id="foot" class="foot">
		<div class="details" id="details_img" >
			<div class="mp4">
			</div>
		</div>
		<div class="info_details float_l" id="fileName">
			文件名:
		</div>
		<div class="info_details float_l" id="fileSize">
			大小:
		</div>
		<div class="info_details float_l" id="fileType">
			文件类型:
		</div>
		<div class="info_details float_l" id="createBy">
			上传者:
		</div>
		<div class="info_details float_l" id="createDate">
			上传时间:
		</div>
	</div>
</div>
<!--body的右击菜单-->
<ul class="contextmenu">

	<li><a href="#" onclick="upload()">上传</a></li>

	<li><a href="#">属性</a></li>

</ul>
<!--文件右击菜单-->
<ul class="file_menu">

	<li><a href="#">下载</a></li>

	<li><a href="#">删除</a></li>

	<li><a href="#">重命名</a></li>

	<li><a href="#">属性</a></li>

</ul>
<!--文件夹右击菜单-->
<ul class="dir_menu">

	<li><a href="#">打开</a></li>

	<li><a href="#">删除</a></li>

	<li><a href="#">重命名</a></li>

	<li><a href="#">打包下载</a></li>

	<li><a href="#">属性</a></li>

</ul>
<div id="upload_div" class="upload_div" style="display: none;">
	<div id="close_icon" class="close_icon"></div>
	<form id="form1" enctype="multipart/form-data" method="post" action="javascript:void(0);">
		<div class="row">
			<label for="fileToUpload">Select a File to Upload</label><br />
			<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" />
		</div>
		<div id="fileName"></div>
		<div id="fileSize"></div>
		<div id="fileType"></div>
		<div class="row">
			<input type="button" onclick="uploadFile()" value="Upload" />
		</div>
		<!--进度条-->
		<div id="progressNumber"></div>
	</form>
</div>
</body>

<script>

	$(document).ready(function(){

		$(document).contextmenu(function(e){
			var actives = $(".dir_file_active");
			actives.each(function(index,item){
				$(item).removeClass("dir_file_active");
			});
			$(".file_menu").hide();
			$(".dir_menu").hide();
			var winWidth = $(document).width();

			var winHeight = $(document).height();

			var posX = e.pageX;

			var posY = e.pageY;

			var menuWidth = $(".contextmenu").width();

			var menuHeight = $(".contextmenu").height();

			var secMargin = 10;

			if(posX + menuWidth + secMargin >= winWidth

					&& posY + menuHeight + secMargin >= winHeight){

				posLeft = posX - menuWidth - secMargin + "px";

				posTop = posY - menuHeight - secMargin + "px";

			}

			else if(posX + menuWidth + secMargin >= winWidth){

				posLeft = posX - menuWidth - secMargin + "px";

				posTop = posY + secMargin + "px";

			}

			else if(posY + menuHeight + secMargin >= winHeight){

				posLeft = posX + secMargin + "px";

				posTop = posY - menuHeight - secMargin + "px";

			}

			else {

				posLeft = posX + secMargin + "px";

				posTop = posY + secMargin + "px";

			};

			$(".contextmenu").css({

				"left": posLeft,

				"top": posTop

			}).show();

			return false;

		});

		$(document).click(function(){

			$(".contextmenu").hide();
			$(".file_menu").hide();
		});

		$(".file").contextmenu(function(e){
			console.log("右击了图标");
			var actives = $(".dir_file_active");
			actives.each(function(index,item){
				$(item).removeClass("dir_file_active");
			});
			$(this).addClass("dir_file_active");
			$(".contextmenu").hide();
			$(".dir_menu").hide();
			var winWidth = $(".file").width();

			var winHeight = $(".file").height();

			var posX = e.pageX;

			var posY = e.pageY;

			var menuWidth = $(".file_menu").width();

			var menuHeight = $(".file_menu").height();

			var secMargin = 5;

			var posLeft = (posX+secMargin) + "px";
			var posTop = (posY+secMargin) + "px";
			dirOrFileClick(this);
			$(".file_menu").css({

				"left": posLeft,

				"top": posTop

			}).show();
			return false;
		});

		/* 文件夹右键列表 */
		$(".dir").contextmenu(function(e){
			console.log("文件夹右击了图标");
			var actives = $(".dir_file_active");
			actives.each(function(index,item){
				$(item).removeClass("dir_file_active");
			});
			$(this).addClass("dir_file_active");
			$(".file_menu").hide();
			$(".contextmenu").hide();
			var winWidth = $(".dir").width();

			var winHeight = $(".dir").height();

			var posX = e.pageX;

			var posY = e.pageY;

			var menuWidth = $(".dir_menu").width();

			var menuHeight = $(".dir_menu").height();

			var secMargin = 5;

			var posLeft = (posX+secMargin) + "px";
			var posTop = (posY+secMargin) + "px";
			dirOrFileClick(this);

			$(".dir_menu").css({

				"left": posLeft,

				"top": posTop

			}).show();
			return false;
		});

		$(".dir,.file").on("click",function(){
			dirOrFileClick(this);
		});
	});
	//文件夹和文件的单击事件
	function dirOrFileClick(t){
		//移除点击右键列表
		$(".file_menu").hide();
		$(".dir_menu").hide();
		$(".contextmenu").hide();

		// console.log("点击了文件或文件夹");
		//移除当时被激活的图标
		var actives = $(".dir_file_active");
		actives.each(function(index,item){
			$(item).removeClass("dir_file_active");
		});
		//激活当前点击的图标
		$(t).addClass("dir_file_active");

		//下面列表获取详细信息展示
		$("#details_img div").removeClass();
		$("#details_img div").addClass($(t).children("div:eq(0)").attr("class"));
	}
	//弹出上传框
	function upload(){
		$("#upload_div").removeAttr("style");
	}
</script>
</html>
